/**
 * Shopware 4.0
 * Copyright © 2012 shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage MediaManager
 * @copyright  Copyright (c) 2012, shopware AG (http://www.shopware.de)
 * @version    $Id$
 * @author shopware AG
 */
.#{$prefix}plugin-manager-manager-grid .#{$prefix}grid-cell-first {
    [class*="sprite"] {
        top: 2px;
        position: relative;
    }
}
.#{$prefix}plugin-manager-manager-grid .#{$prefix}grid-cell-first .#{$prefix}grid-cell-inner div {
    top: 2px;
    position: relative;
}
.#{$prefix}plugin-manager-navigation {
    @include inner-border(0 1px 0 0, #fff);
    background: #f0f2f4;
    border-right: 1px solid #c7c7c7 !important;
    color: $font-color;
    text-shadow: 0 1px 0 #fff;

    .headline {
        margin: 12px 0 8px;
    }

    ul {
        font-size: 12px;
        line-height: 18px;
        margin: 0 0 12px 0;

        li {
            position: relative;

            span {
                @include border-radius(8px);
                cursor: pointer;
                display: block;
                padding: 0 0 0 12px;
                margin: 0 0 2px;

                &.active, &:hover {
                    background: lighten($font-color, 25%);
                    color: #fff;
                    text-shadow: none;
                    font-weight: bold;
                }
                &:hover {

                }

                &.badge {
                    @include border-radius(8px);
                    position: absolute;
                    right: 0;
                    top: 2px;
                    color: #fff;
                    font-size: 11px;
                    line-height: 14px;
                    text-shadow: none;
                    font-weight: bold;
                    padding: 0 8px;
                    background: lighten($font-color, 25%);
                }
            }
        }
    }

    .#{$prefix}account-navigation .outer-container {
        border-bottom: 1px solid lighten($font-color, 50%);
    }
    .#{$prefix}category-navigation .outer-container {
        border-top: 1px solid #fff;
    }
}

.#{$prefix}plugin-manager-store-view {
    color: #333;
    font: 12px/16px Arial, sans-serif;

    .row, .column {
        @include box-sizing(border-box);
    }

    .row {
        width: 100%;
    	height: 120px;
    	background: #f5f5f5;
    	border-top: 1px solid #f8f8f8;
    	border-bottom: 1px solid #dfdfdf;
    }
    .row-alt {
    	background: #ebebeb;
    }

    .column {
    	width: 33.33%;
    	display: block;
    	float: left;
    	height: 120px;
    	border-left: 1px solid #f8f8f8;
    	border-right: 1px solid #dfdfdf;
    	padding: 10px;
    	position: relative;
    }
    .clearfix:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    .section-header {
    	height: 22px;
    	position: relative;
    	background: url("") repeat-x;
    }
    .section-header h2 {
    	color: #fff;
    	font-weight: bold;
    	text-shadow: 0 1px 0 #0a51a5;
    	line-height: 22px;
    	margin: 0 0 0 10px;
    	font-size: 12px;
    }
    .section-header a {
    	position: absolute;
    	right: 10px;
    	top: 0;
    	color: #fff;
    	font-size: 11px;
    	text-decoration: none;
    	line-height: 22px;
    	text-shadow: 0 1px 0 #0a51a5;
    }
    .highlights .section-header a { display: none }
    .highlights .column .certificated { display: none }
    .thumb {
        @include border-radius(6px);
    	width: 57px;
    	height: 57px;
    	background: #fff;
    	line-height: 57px;
    	border: 1px solid #b9b9b9;
        float: left;
        display: block;

        .inner-thumb {
            @include border-radius(6px);
            width: 55px;
            height: 55px;
            background-repeat: no-repeat;
            background-position: center center;
            text-indent: -9999em;
        }
    }
    .detail {
        margin-left: 65px;
    	display: block;
    	height: 68px;
        text-overflow: ellipsis-word;
        overflow: hidden;
    }
    .detail h3 {
    	font-weight: bold;
    	text-shadow: 0 1px 0 #fff;
    	color: #515151;
    	margin: 0 0 14px;
    }
    .detail span {
    	display: block;
    	color: #afafaf;
    	text-shadow: 0 1px 0 #fff;
    	font-size: 11px;
    }
    .detail .stars {
        background: url("") no-repeat;
        height: 13px;
        width: 70px;
        display: inline-block;
        position: absolute;
        bottom: 10px;
        left: 2px;
    }
    .highlights .detail .stars {
        left: 124px;
        bottom: 28px;
    }

    .detail .star1 {
        background-position: 0 -14px;
    }
    .detail .star2 {
        background-position: 0 -28px;
    }
    .detail .star3 {
        background-position: 0 -42px;
    }
    .detail .star4 {
        background-position: 0 -56px;
    }
    .detail .star5 {
        background-position: 0 -70px;
    }
    .detail .star6 {
        background-position: 0 -84px;
    }
    .detail .star7 {
        background-position: 0 -98px;
    }
    .detail .star8 {
        background-position: 0 -112px;
    }
    .detail .star9 {
        background-position: 0 -126px;
    }
    .detail .star10 {
        background-position: 0 -140px;
    }
    .detail .buy {

        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#ededed, 0%, 1),
                      svg-color-stop(#cdcdcd, 100%, 1)
                    )) center center no-repeat transparent;

        @include border-radius(12px);
        border: 1px solid #c5c5c5;
    	display: inline-block;
    	padding: 0 9px;
    	text-decoration: none;
    	color: #545454;
        text-shadow: 0 1px 0 #fff;
        font-size: 11px;
        font-weight: bold;
    }
    .detail .price {
    	text-align: right;
    	color: #333;
    	font-weight: bold;
    	margin: 0 0 4px;
    }
    .detail .action {
    	position: absolute;
    	right: 8px;
    	bottom: 8px;
    }
    .detail p.description { display: none }
    .column .highlight {
    	height: 70px;
    	width: 70px;
    	position: absolute;
    	top: -3px;
    	left: -4px;
    	z-index: 10;
    	background: url("") no-repeat;
    }
    .column .highlight strong {
    	position: relative;
    	font-weight: bold;
    	left: -8px;
    	top: 18px;
    	color: #fff;
    	font-size: 11px;
    	display: block;
        -moz-transform: rotate(-45deg);
    	-webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
    	transform: rotate(-45deg);
    	text-align: center;
    	width: 70px;
    	text-shadow: 0 1px 0 #003900;
    }
    .highlights {
    	margin: 0 0 30px;
    }
    .highlights .row {
    	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    .highlights .column, .highlights .row {
    	height: 135px;
    	background: #e9f0f8;
    }
    .highlights .column {
    	border-bottom: 1px solid #afcae0;
    	border-right: 1px solid #afcae0;
    }
    .highlights .column {
    	width: 50%;
        padding-right: 25px;
    }
    .highlights .thumb {
    	width: 105px;
    	height: 105px;
        float: left;

        div {
            width: 103px;
            height: 103px;
            overflow: hidden;
        }
    }
    .highlights .detail {
    	height: 80px;
        margin-left: 115px;
    }
    .highlights .detail span, .highlights .detail p {
    	color: #555;
    	text-shadow: 0 1px 0 #fff;
    }
    .highlights .detail p.description {
    	color: #333;
    	font-size: 11px;
    	padding: 0 20px 0 0;
        display: block;
    }
    .listing .section-header {
    	border-top: 1px solid #c7c7c7;
    	border-bottom: 1px solid #a9a9a9;
        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#ededed, 0%, 1),
                      svg-color-stop(#e2e2e2, 47%, 1),
                      svg-color-stop(#d1d1d1, 100%, 1)
                    )) center center no-repeat transparent;
    }
    .highlights .listing .section-header a { display: none }
    .listing .section-header h2, .listing .section-header a {
    	color: #545454;
    	text-shadow: 0 1px 0 #fff;
    }
    .thumb {
    	position: relative;
    }
    .thumb .certificated {
    	position: absolute;
    	bottom: -1px;
    	left: -13px;
    	width: 71px;
    	height: 19px;
    	background: url("") no-repeat;
    }

    section {
    	display: block;
    	margin: 0 0 10px;
    	border-bottom: 1px solid #c7c7c7;
    }
}
.#{$prefix}plugin-manager-detail-settings .#{$prefix}plugin-manager-plugin-properties .#{$prefix}form-display-field {
	margin-top: 5px;
}

div[id^=plugin-manager-detail-window] {
    .#{$prefix}outer-thumb {
        margin: 0 0 5px;
        border: 1px solid #c5c5c5;

        img {
            max-width: 100%;
        }
    }
    .#{$prefix}product-link a {
        text-decoration: none;
        color: #009CFF;
    }
    .#{$prefix}meta-panel {
        * { color: $font-color }
        strong { display: inline-block; font-weight: bold; width: 100px }
    }
    .#{$prefix}main-details {
        line-height: 16px;
        .plugin-name, .changelog-headline {
            font-size: 21px;
            line-height: 28px;
            color: $font-color;
            margin: 0 0 15px;
            font-weight: bold;
        }
        .changelog-headline { font-size: 14px; line-height: 18px; margin: 0 0 4px }

        .description {
            p { margin: 0 0 12px; }
            strong, b { font-weight: bold }
            em, i { font-style: italic }
            margin: 0 0 15px;
        }
        .changelog {
            br { display: none }
            p { margin: 12px 0 0 }
            strong { font-weight: bold; }
            li { list-style: square; margin-left: 15px; }
        }
    }
    .#{$prefix}article-price {
        @include user-select(none);
        border-top: 1px solid #dfdfdf;
        margin: 10px 0 0;
        padding: 10px 0 0;
        font-size: 24px;
        text-align: center;
        text-shadow: 0 1px 0 #fff;
        font-weight: bold;
    }
    .user-comment {
        h3 {
            font-weight: bold;
            font-size: 14px;
            position: relative;

            .star {
                background: url("") no-repeat;
                display: inline-block;
                margin: 0 0 0 8px;
                width: 170px;
                height: 15px;
                text-indent: -9999em;
                position: relative;
            }
            .star0 {
                background-position: -170px 0;
            }
            .star1 {
                background-position: -153px 0;
            }
            .star2 {
                background-position: -136px 0;
            }
            .star3 {
                background-position: -119px 0;
            }
            .star4 {
                background-position: -102px 0;
            }
            .star5 {
                background-position: -85px 0;
            }
            .star6 {
                background-position: -68px 0;
            }
            .star7 {
                background-position: -51px 0;
            }
            .star8 {
                background-position: -34px 0;
            }
            .star9 {
                background-position: -17px 0;
            }
            .star10 {
                background-position: 0 0;
            }
        }
        .meta {
            color: #999;
            font-size: 11px;
            margin: 0 0 2px;
        }
        .comment {
            margin: 0 0 12px
        }
    }
}
.#{$prefix}plugin-manager-account-confirm {
    .outer-container {
        margin: 20px;
        padding: 20px;
        border: 1px solid #c7c7c7;
        background: #fff;

        h3 {
            color: #333;
            font-size: 16px;
            line-height: 21px;
        }
        .ordernumber, .amount { color: #999 }
        .amount { margin: 0 0 10px }
        .price {
            margin: 18px 0 0;
            color: #333;
            font-size: 16px;
            line-height: 21px;
            font-weight: bold;

            strong { display: inline-block; margin: 0 10px 0 0 }
        }
        .tax-notice {
            display: block;
            font-size: 11px;
            color: #999;
            font-weight: normal
        }
    }
}
.#{$prefix}tax-notice {
    @include inner-border(1px 0 0 0, #fff);
    background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                  svg-color-stop(#ededed, 0%, 1),
                  svg-color-stop(#e2e2e2, 47%, 1),
                  svg-color-stop(#d1d1d1, 100%, 1)
                )) center center no-repeat transparent;
    text-shadow: 0 1px 0 #fff;
    border-top: 1px solid #c7c7c7 !important;
    padding: 3px 0;
    text-align: center;
    color: #545454;
    font-size: 11px;
}
div[id^=plugin-manager-account-login-window] {
    .#{$prefix}forgot-password-field, .#{$prefix}forgot-shopware-id-field, .#{$prefix}forgot-password-field, .#{$prefix}create-account-field {
        margin-left: 105px;
        a {
            color: #009CFF;
            font-size: 11px;
        }
    }
    .#{$prefix}forgot-password-field, .#{$prefix}forgot-shopware-id-field {
        float: left;
        width: 130px !important;
    }
    .#{$prefix}forgot-password-field { margin-right: 10px; }
    .#{$prefix}forgot-shopware-id-field { margin: 0; text-align: right }
}